<template>
  <el-dialog
    class="tool-gennerate-edit-dialog"
    :visible.sync="open"
    width="60%"
    :fullscreen="fullscreen"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    top="50px"
  >
    <div slot="title" class="tool-gennerate-edit-dialog-header">
      <div class="left"></div>
      <div class="center">{{ title }}</div>
      <div class="right">
        <span
          class="iconfont"
          :class="fullscreen ? 'icon-screen-scale' : 'icon-screen-full'"
          @click="fullscreen = !fullscreen"
        ></span>
      </div>
    </div>
    <div class="tool-gennerate-edit-dialog-content">
      <section class="tool-gennerate-edit-dialog-section">
        <base-form ref="baseForm" :form.sync="form"></base-form>
      </section>
      <section class="tool-gennerate-edit-dialog-section" type="auto">
        <el-tabs
          class="tool-gennerate-edit-dialog-tabs"
          v-model="activeName"
          lazy
        >
          <el-tab-pane label="数据库属性" name="database">
            <transition name="tab-change">
              <fields-form
                v-show="activeName == 'database'"
                ref="fieldsForm"
                :form.sync="form"
              ></fields-form>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="页面属性" name="page">
            <transition name="tab-change">
              <page-form
                v-show="activeName == 'page'"
                ref="pageForm"
                :form.sync="form"
              ></page-form>
            </transition>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import baseForm from "./baseForm.vue";
import fieldsForm from "./fieldsForm.vue";
import pageForm from "./pageForm.vue";
import { buildTable } from "@/api/system/tool";
export default {
  name: "GenerateEditDialog",

  components: {
    baseForm,
    fieldsForm,
    pageForm,
  },

  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    editForm: {
      type: Object,
      default: null,
    },
    tableFiledSelectList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      // 默认选项卡
      activeName: "database",
      // 弹出层是否全屏
      fullscreen: false,
      // 表单
      form: {
        id: null,
        tableType: 1,
        tableName: null,
        tableDescribe: null,
        tableClassify: null,
        isPaging: 1,
        isTree: 0,
        tableFileds: [
          {
            fieldName: "id",
            fieldType: "varchar",
            fieldLength: 255,
            fieldDecimal: 0,
            fieldNotes: "主键id，唯一标识",
            fieldDefault: null,
            fieldNotNull: 1,
            fieldPrimarykey: 1,
            fieldCharacter: "utf8",
            fieldCollation: "utf8_general_ci",
            form: 0,
            table: 0,
            sort: 0,
            readonly: 0,
            required: 0,
            search: 0,
            searchType: "=",
            controlType: "dict1",
            controlDefault: "",
            dictType: "",
            isEdit: 0,
          },
        ],
      },
    };
  },

  watch: {
    open(val) {
      if (val) {
        if (this.editForm) {
          this.form = this.editForm;
        }
      }
    },
  },

  methods: {
    /** 提交按钮 */
    async submitForm() {
      let baseForm = this.$refs["baseForm"].$children[0];
      let fieldsForm = this.$refs["fieldsForm"].$children[1];
      const baseFormCheck = await this.formCheck(baseForm);
      if (baseFormCheck.code === 200) {
        const fieldsFormCheck = await this.formCheck(fieldsForm);
        if (fieldsFormCheck.code === 200) {
          if (this.form.id) {
            this.updateData();
          } else {
            this.saveData();
          }
        } else {
          this.activeName = "database";
          this.$refs["fieldsForm"].editId = fieldsFormCheck.editId;
        }
      }
    },
    // 表单校验
    formCheck(form) {
      return new Promise((resolve, reject) => {
        form.validate((valid, invalidFields) => {
          if (valid) {
            resolve({
              code: 200,
            });
          } else {
            let fieldMap = Object.keys(invalidFields);
            for (let index = 0; index < fieldMap.length; index++) {
              const fieldName = fieldMap[index];
              let fieldArr = fieldName.split(".");
              let length = fieldArr.length;
              if (length > 2) {
                // 模拟点击单元格
                let editId = fieldArr[length - 1] + fieldArr[length - 2];
                resolve({
                  code: 500,
                  editId: editId,
                });
                break;
              }
            }
          }
        });
      });
    },
    // 保存数据
    saveData() {
      buildTable(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.cancel();
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.$emit("success", true);
          } else {
            this.cancel();
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 更新数据
    updateData() {
      console.log(132);
    },
    // 取消按钮
    cancel() {
      this.reset();
      let baseForm = this.$refs["baseForm"].$children[0];
      baseForm.resetFields();
      let fieldsForm = this.$refs["fieldsForm"].$children[1];
      fieldsForm.resetFields();
      this.$emit("update:open", false);
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        tableType: 1,
        tableName: null,
        tableDescribe: null,
        tableClassify: null,
        isPaging: 1,
        isTree: 0,
        tableFileds: [
          {
            fieldName: "id",
            fieldType: "varchar",
            fieldLength: 255,
            fieldDecimal: 0,
            fieldNotes: "主键id，唯一标识",
            fieldDefault: null,
            fieldNotNull: 1,
            fieldPrimarykey: 1,
            fieldCharacter: "utf8",
            fieldCollation: "utf8_general_ci",
            form: 0,
            table: 0,
            sort: 0,
            readonly: 0,
            required: 0,
            search: 0,
            searchType: "=",
            controlType: "dict1",
            controlDefault: "",
            dictType: "",
            isEdit: 0,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss">
// el-dialog 添加/修改弹窗
.tool-gennerate-edit-dialog {
  .el-dialog {
    display: flex;
    flex-direction: column;
    transition: all 0.2s;

    // el-dialog 头部区域
    .el-dialog__header {
      padding: 0;
      border-bottom: 1px solid #e5e7eb;

      .tool-gennerate-edit-dialog-header {
        padding: 10px 20px;
        width: 100%;
        height: 50px;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        .left,
        .right {
          font-size: 20px;
          flex: 1;
          display: flex;
          align-items: center;
        }

        .right {
          justify-content: flex-end;

          span {
            font-size: 20px;
            cursor: pointer;
            user-select: none;
          }
        }

        .title {
          width: fit-content;
        }
      }
    }

    // el-dialog 内容区域
    .el-dialog__body {
      position: relative;
      padding: 10px 20px;
      min-height: 500px;
      flex: 1;

      // 内容
      .tool-gennerate-edit-dialog-content {
        position: absolute;
        left: 0;
        top: 0;
        padding: 10px 20px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .tool-gennerate-edit-dialog-section {
          padding: 5px 0 0 0;
          width: 100%;
          height: fit-content;
        }

        .tool-gennerate-edit-dialog-section[type="auto"] {
          padding: 5px 0 5px 0;
          height: 0;
          flex: 1;
        }

        .tool-gennerate-edit-dialog-tabs {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;

          .el-tabs__content {
            width: 100%;
            flex: 1;

            .el-tab-pane {
              width: 100%;
              height: 100%;

              .tab-change-enter-active {
                transition: all 0.35s;
              }

              .tab-change-enter {
                opacity: 0;
                transform: translateX(50px);
              }
            }
          }
        }
      }
    }

    // el-dialog 底部区域
    .el-dialog__footer {
      padding: 10px 20px;
      border-top: 1px solid #e5e7eb;
    }
  }
}

@media (min-height: 800px) {
  .tool-gennerate-edit-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
